<template>
	<div class="swiper-container">
		<div class="swiper-wrapper">
			<div class="swiper-slide">
				<img src="./images/banner/banner_01.png" alt="banner_01.png">
			</div>
			<div class="swiper-slide">
				<img src="./images/banner/banner_02_new.png" alt="banner_02_new.png">
			</div>
			<div class="swiper-slide">
				<img src="./images/banner/banner_03.png" alt="banner_03.png">
			</div>
		</div>
		<!-- 如果需要分页器 -->
		<div class="swiper-pagination"></div>

		<!-- 如果需要导航按钮 -->
		<div class="swiper-button-prev"></div>
		<div class="swiper-button-next"></div>

		<!-- 如果需要滚动条 -->
		<!-- <div class="swiper-scrollbar"></div> -->
	</div>
</template>
<script type="text/javascript">
	import Swiper from 'swiper';
	export default {
		name: 'swiper',
		props: ['list'],
		created() {
			
		},
		mounted() {
			let mySwiper = new Swiper ('.swiper-container', {
				loop: true,
				// 如果需要分页器
				pagination: '.swiper-pagination',
				// 如果需要前进后退按钮
				nextButton: '.swiper-button-next',
				prevButton: '.swiper-button-prev',
				// 如果需要滚动条
				// scrollbar: '.swiper-scrollbar',
			});
		}
	}
</script>
<style lang="scss">
	@import "/node_modules/swiper/dist/css/swiper.min.css";
	.swiper-container {
		width: 100%;
		height: 2rem;
		img {
			max-width: 100%;
		}
	}
</style>